<template>
	<svg aria-hidden="true" class="svg-icon">
		<use :xlink:href="symbolId" :fill="color" />
	</svg>
</template>

<script lang="ts" setup>
interface IProps {
	name: string;
	color?: string;
	size?: string;
}

const props = withDefaults(defineProps<IProps>(), {
	name: "",
	color: "inherit",
	size: "1.5rem"
});

const symbolId = computed(() => `#icon-${props.name}`);
</script>
<style scope>
.svg-icon {
	@apply flex-shrink-0;
	width: v-bind("$props.size");
	height: v-bind("$props.size");
	color: v-bind("$props.color");
	fill: currentColor;
	/* transform: translateY(-1px); */
}
</style>
